<template>
  <div>
    <kt-button :label="$t('action.batchDelete')"  :perms="permsDelete" :size="size" type="danger" @click="handleBatchDelete()"
              :disabled="this.selections.length===0" style="float:left; margin-left: 10px" v-if="showBatchDelete & showOperation&OEM"/>
    <!--表格栏-->
    <el-table :data="data.content" ref="dataTable" :highlight-current-row="highlightCurrentRow" @selection-change="selectionChange" @clearSelect="clearSelect"
    :row-key="getRowKey"
          @current-change="handleCurrentChange"  v-loading="loading" :element-loading-text="$t('action.loading')" :border="border" :stripe="stripe"
          :show-overflow-tooltip="showOverflowTooltip" :max-height="maxHeight" :size="size" :align="align" style="width:100%;" >
      <el-table-column type="selection" width="50" v-if="showBatchDelete & showOperation" :reserve-selection="reserveSelection"></el-table-column>
      <el-table-column v-for="column in columns" header-align="center" align="center"
        :prop="column.prop" :label="column.label" :width="column.width" :min-width="column.minWidth"
        :fixed="column.fixed" :key="column.prop" :type="column.type" :sortable="column.sortable!=null?true:column.sortable">
      </el-table-column>
      <!--我的消息-->
      <el-table-column :label="$t('action.message')" v-if="showOperation&publicMessage" header-align="center" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isRead == 1" size="small" type="success">已读</el-tag>
          <el-tag v-if="scope.row.isRead == 2" size="small" type="danger">未读</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-for="column in columns2" header-align="center" align="center"
        :prop="column.prop" :label="column.label" :width="column.width" :min-width="column.minWidth"
        :fixed="column.fixed" :key="column.prop" :type="column.type" :sortable="column.sortable!=null?true:column.sortable">
      </el-table-column>
      <!--oem-->
      <el-table-column :label="$t('action.operation')" width="250" fixed="right" v-if="showOperation&OEM" header-align="center" align="center">
        <template slot-scope="scope" >
          <kt-button :label="$t('action.distribution')" :perms="permsDistribution" type="primary"  :size="size" @click="distributionoem(scope.$index, scope.row)" />
          <kt-button :label="$t('action.edit')"  :perms="permsEdit" :size="size" @click="handleEdit(scope.$index, scope.row)" />
          <kt-button :label="$t('action.delete')"  :perms="permsDelete" :size="size" type="danger" @click="handleDelete(scope.$index, scope.row)" />
        </template>
      </el-table-column>
      <!--角色-->
      <el-table-column :label="$t('action.operation')" width="250" fixed="right" v-if="showOperation&role" header-align="center" align="center">
        <template slot-scope="scope" >
          <kt-button :label="$t('action.editrole')"  :perms="permsEdit" :size="size" @click="handleEdit(scope.$index, scope.row)" />
        </template>
      </el-table-column>
      <!--管理员-->
      <el-table-column :label="$t('action.operation')" width="400" fixed="right" v-if="showOperation&admin" header-align="center" align="center">
        <template slot-scope="scope">
          <el-switch :active-text="test1" v-if="hasPerms('AuthorityManagement:SystemAdministrator:switch')"
                    :inactive-text="test2"   class="demo" active-color="#13ce66" v-model="scope.row.accountStatus" inactive-color="#ff4949"
                    @change="changeSwitch(scope.$index, scope.row)"  :active-value='active' :inactive-value='inactive' ></el-switch>
          <kt-button :label="$t('action.edit')" :perms="permsEdit" :size="size" @click="handleEdit(scope.$index, scope.row)" />
          <kt-button :label="$t('action.resetPass')" :perms="permsResetPass" :size="size" @click="handleResetpass(scope.$index, scope.row)" />
        </template>
      </el-table-column>
      <!--消息-->
      <el-table-column :label="$t('action.operation')" width="400" fixed="right" v-if="showOperation&message" header-align="center" align="center">
        <template slot-scope="scope">
          <el-switch :active-text="test1" v-if="hasPerms('MessageManagement:MessageBulletin:switch')"
                    :inactive-text="test2"   class="demo" active-color="#13ce66" v-model="scope.row.messageStatus" inactive-color="#ff4949"
                    @change="changeSwitch(scope.$index, scope.row)"  :active-value='active' :inactive-value='inactive' ></el-switch>
          <!--<Crm-Switch @change="changeSwitch(scope.$index, scope.row)" :value="scope.row.messageStatus"></Crm-Switch>-->
          <kt-button :label="$t('action.see')"  :perms="permsSee" :size="size" @click="handleSee(scope.$index, scope.row)" />
          <kt-button :label="$t('action.delete')" :disabled="scope.row.messageStatus == 1" :perms="permsDelete" type="danger" :size="size" @click="handleDelete(scope.$index, scope.row)" />
          <kt-button :label="$t('action.edit')" :disabled="scope.row.messageStatus == 1" :perms="permsEdit" :size="size" @click="handleEdit(scope.$index, scope.row)" />
        </template>
      </el-table-column>
      <!--新增消息-->
      <el-table-column :label="$t('action.operation')" width="100" fixed="right" v-if="showOperation&newMessage" header-align="center" align="center">
        <template slot-scope="scope">
          <kt-button :label="$t('移除')" :perms="permsRemove" :size="size" @click="handleRemove(scope.$index, scope.row)" />
        </template>
      </el-table-column>
      <!--报单管理-->
      <el-table-column :label="$t('action.operation')" width="400" fixed="right" v-if="showOperation&declaration" header-align="center" align="center">
        <template slot-scope="scope">
          <kt-button :label="$t('action.bind')" :perms="permsBind" :size="size" @click="handleBinduser(scope.$index, scope.row)" />
          <kt-button :label="$t('action.untying')" :perms="permsUntying" :size="size" @click="handleUntie(scope.$index, scope.row)" />
          <kt-button :label="$t('action.delete')" :perms="permsDelete" :size="size" type="danger" @click="handleDelete(scope.$index, scope.row)" />
        </template>
      </el-table-column>
      <!-- 组织管理   人员管理按钮 -->
      <el-table-column label="是否获取资源" width='100' fixed="right" v-if="showOperation&person" header-align="center" align="center">
        <template slot-scope="scope">
          <el-switch :active-text="test3" v-if="hasPerms('Organization:Person:isControlResource')"
                    :inactive-text="test4"  :width='40'   class="demo" active-color="#13ce66" v-model="scope.row.isControlResource" inactive-color="#ff4949"
                    @change="changeSwitch2(scope.$index, scope.row)"  :active-value='active' :inactive-value='inactive' ></el-switch>
        </template>
      </el-table-column>
      <el-table-column :label="$t('数据权限')" width='100' fixed="right" v-if="showOperation&person" header-align="center" align="center">
      <template slot-scope="scope">
          <kt-button :label="$t('数据权限')" v-if='scope.row.duty==1' :perms="dataPermission" :size="size" @click="handleDataPermission(scope.$index, scope.row)" />
          <!-- <kt-button :label="$t('数据权限')" :perms="dataPermission" :size="size" @click="handleDataPermission(scope.$index, scope.row)" /> -->
        </template>
      </el-table-column>
      
      <el-table-column :label="$t('action.operation')" width='350' fixed="right" v-if="showOperation&person" header-align="center" align="center">
        <template slot-scope="scope">
          <el-switch :active-text="test1" v-if="hasPerms('Organization:Person:switch')"
                    :inactive-text="test2" :width='58'   class="demo" active-color="#13ce66" v-model="scope.row.accountStatus" inactive-color="#ff4949"
                    @change="changeSwitch(scope.$index, scope.row)"  :active-value='active' :inactive-value='inactive' ></el-switch>
          <kt-button :label="$t('action.edit')" :perms="permsEdit" :size="size" @click="handleEdit(scope.$index, scope.row)" />
          <kt-button :label="$t('action.deletePartment')"  :perms="permsDeletePartment" :size="size" type="danger" @click="handleDeletePartment(scope.$index, scope.row)" />
          
          <kt-button :label="$t('action.resetPass')" :perms="permsResetPass" :size="size" @click="handleResetpass(scope.$index, scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <el-pagination layout="total, prev,sizes, pager, next, jumper" 
                    @current-change="refreshPageRequest"
                    :current-page="pageRequest.pageNum" 
                    :page-size="pageRequest.pageSize"  
                    :total="parseInt(data.totalSize)?parseInt(data.totalSize):0"
                    style="float:right;" 
                    @size-change="handleSizeChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton"
import CrmSwitch from "@/views/Core/CrmSwitch"
import { hasPermission } from '@/permission/index.js'
export default {
  name: 'KtTable',
  components:{
			KtButton,
      CrmSwitch
	},
  props: {
    columns: Array, // 表格列配置
    columns2: Array, // 表格列配置
    data: Object, // 表格分页数据
    permsEdit: String,  // 编辑权限标识
    dataPermission:String,
    permsSee: String,  // 查看权限标识
    permsDelete: String,// 删除权限标识
    permsDeletePartment: String,// 剔除部门权限标识
    permsResetPass: String,// 重置密码权限标识
    permsDistribution: String,// 分配权限标识
    permsBind: String,// 绑定权限标识
    permsRemove: String,// 移出权限标识
    permsUntying: String,// 解绑权限标识
    OEM: Boolean, //控制oem按钮
    role:Boolean, //角色管理按钮
    admin:Boolean, //管理员按钮
    message:Boolean, //消息按钮
    outcry:Boolean, //外呼按钮
    newMessage:Boolean, //新增消息按钮
    publicMessage:Boolean, //我的消息按钮
    declaration:Boolean, //报单按钮
    person:Boolean, //人员管理按钮
    reserveSelection:Boolean,
    perms: {  // 按钮权限标识，外部使用者传入
      type: String,
      default: null
    },
    size: { // 尺寸样式
      type: String,
      default: 'mini'
    },
    align: {  // 文本对齐方式
      type: String,
      default: 'left'
    },
    maxHeight: {  // 表格最大高度
      type: Number,
      default: 500
    },
    showOperation: {  // 是否显示操作组件
      type: Boolean,
      default: true
    },
    border: {  // 是否显示边框
      type: Boolean,
      default: false
    },
    stripe: {  // 是否显示斑马线
      type: Boolean,
      default: true
    },
    highlightCurrentRow: {  // // 是否高亮当前行
      type: Boolean,
      default: true
    },
    showOverflowTooltip: {  // 是否单行显示
      type: Boolean,
      default: true
    },
    showBatchDelete: {  // 是否显示操作组件
      type: Boolean,
      default: true
    },
    test1:{
      type: String,
      default: '启用'
    },
    test2:{
      type: String,
      default: '停用'
    },
    test3:{
      type: String,
      default: '是'
    },
    test4:{
      type: String,
      default: '否'
    },
    active:{
      type: String,
      default: '1'
    },
    inactive:{
      type: String,
      default: '2'
    },
  },
  data() {
    return {
      // 分页信息
			pageRequest: {
				pageNum: 1,
        pageSize: 30
      },
      loading: false,  // 加载标识
      selections: [],  // 列表选中列
      sizes: ["10","20","30","40","50","100"],  // 列表选中列
      value:""
    }
  },
  methods: {
    // 分页查询
    findPage: function () {
        this.loading = true
        let callback = res => {
          this.loading = false
        }
      this.$emit('findPage', {pageRequest:this.pageRequest, callback:callback})
    },
    // 选择切换
    selectionChange: function (selections) {
      this.selections = selections
      this.$emit('selectionChange', {selections:selections})
    },
    // 选择切换
    handleCurrentChange: function (val) {
      this.$emit('handleCurrentChange', {val:val})
    },
    // 换页刷新
		refreshPageRequest: function (pageNum) {
      this.pageRequest.pageNum = pageNum
      this.findPage()
    },
    // 分页刷新
    handleSizeChange(val) {
      this.pageRequest.pageSize=val
      this.findPage(null)
    },
    //switch开关
    changeSwitch:function (index,row) {
      this.$emit('changeSwitch', {index:index, row:row})
    },
    changeSwitch2:function (index,row) {
      this.$emit('changeSwitch2', {index:index, row:row})
    },
    // 编辑
    distributionoem: function (index, row) {
      this.$emit('distributionoem', {index:index, row:row})
		},
    // 剔除部门
    handleDeletePartment: function (index, row) {
      this.$emit('handleDeletePartment', {index:index, row:row})
		},
    // 编辑
		handleEdit: function (index, row) {
      this.$emit('handleEdit', {index:index, row:row})
		},
    // 重置密码
    handleResetpass: function (index, row) {
      this.$emit('handleResetpass', {index:index, row:row})
		},
    // 查看
		handleSee: function (index, row) {
      this.$emit('handleSee', {index:index, row:row})
		},
    // 删除
		handleDelete: function (index, row) {
			this.delete(row.id)
    },
    // 删除TQ
    handleDeleteTQ:function(index, row){
      this.$emit('handleDeleteTQ', {index:index, row:row})
    },
    // 绑定用户
		handleBinduser: function (index, row) {
			this.$emit('handleBinduser', {index:index, row:row})
    },
    //移出
    handleRemove:function (index,row) {
      this.$emit('handleRemove', {index:index, row:row})
    },
    // 解绑
		handleUntie: function (index, row) {
				this.Untie(row.id)
    },
    // 数据权限
    handleDataPermission:function (index,row) {
      this.$emit('handleDataPermission', {index:index, row:row})
    },

    // 解绑操作
		Untie: function (idNumber) {
			this.$confirm('确认解绑该用户？', '提示', {
				type: 'warning'
			}).then(() => {
				let params = []
				let userNumber = (idNumber+'').split(',')
				for(var i=0; i<userNumber.length; i++) {
					params.push({'id':userNumber[i]})
        }
        this.loading = true
        let callback = res => {
          if(res.result == 1) {
            this.$message({message: '解绑成功', type: 'success'})
            this.findPage()
          } else {
            this.$message({message: '操作失败, ' + res.msg, type: 'error'})
          }
          this.loading = false
        }
        this.$emit('handleUntie', {params:params, callback:callback})
			}).catch(() => {
			})
		},
    // 批量删除
		handleBatchDelete: function () {
      let ids = this.selections.map(item => item.id).toString()
      this.batchdelete(ids)
		},
		// 删除操作
		delete: function (ids) {
			this.$confirm('确认删除选中记录吗？', '提示', {
				type: 'warning'
			}).then(() => {
				let params = []
				let idArray = (ids+'').split(',')
				for(var i=0; i<idArray.length; i++) {
					params.push({'id':idArray[i]})
        }
        this.loading = true
        let callback = res => {
          if(res.result == 1) {
            this.$message({message:  res.msg, type: 'success'})
            this.findPage(null)
          } else {
            this.$message({message:  res.msg, type: 'error'})
          }
          this.loading = false
        }
        this.$emit('handleDelete', {params:params, callback:callback})
			}).catch(() => {
			})
		},
    batchdelete: function (ids) {
      this.$confirm(`确认删除选中${this.selections.length}条记录吗？`, '提示', {
        type: 'warning'
      }).then(() => {
        let params = []
        // let idArray = (ids+'').split(',')
        // for(var i=0; i<idArray.length; i++) {
          params.push(ids)
        // }
        this.loading = true
        let callback = res => {
          if(res.result == 1) {
            this.$message({message:  res.msg, type: 'success'})
            this.findPage(null)
          } else {
            this.$message({message:  res.msg, type: 'error'})
          }
          this.loading = false
        }
        this.$emit('handleBatchDelete', {params:params, callback:callback})
      }).catch(() => {
      })
    },
    hasPerms: function (perms) {
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms)
    },
    getRowKey:function(row){
      return row.id
    },
    clearSelect(params){
      this.$refs.dataTable.clearSelection()
    }
  },
  mounted() {
    this.refreshPageRequest(1)
  }
}
</script>

<style scoped>
  .demo /deep/ .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
  }
  .demo /deep/ .el-switch__label--left {
    z-index: 9;
    left: 20px;
  }
  .demo /deep/ .el-switch__label--right {
    z-index: 9;
    left: -5px;
  }
  .demo /deep/ .el-switch__label.is-active {
    display: block;
  }
  /* .demo /deep/  .el-switch__core{
    width: 58px!important;
  } */
</style>

